warriors_fanonfandomcom-20200216-history
That One Guide to Coding
Yes, it's that one guide to coding! I kinda wanna help more so here's Part 1? 2? If you consider my crash course a guide, in my guide series! Today we're going to "learn" the basics of coding! So, coding. Pretty hard and intimidating to beginners, eh? Well no worries, because all the great coders in the world were once just like you, and well, we've gotta start somewhere, right? There's many coding languages, actually. BBCode (which is arguably, the simplest code language), HTML + CSS (the coding language this wiki and other wikis use), Javascript, and many more! But today, we're focusing on HTML. HTML's main "body command" or general command term is div. Div is used to close a command, as in /div, or code the background, as in div style, and many more uses. Now this all sounds confusing but the pictures should explain as we go along! Some things you should always remember #Never use the "rounded brackets" ( ) in code, use the "sharp brackets" <> in code. #Whenever separating elements in a div style tag, use the semi-quollen ( ; ) instead of quollen ( : ); for example Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed viverra tellus in hac habitasse platea dictumst. I am now going to explain each and every element in the code. If you can understand what I'm going to type, then you can already go code your own page and don't need to read the later sections on harder code. "Background: Linear Gradient (to bottom, red, blue)" Background is basically, well, the background of the page. The term "linear gradient" is basically a color fading into another. You can use the terms "to top", "to bottom", "to right", "to left", to decide where the colors fade to, for example when I typed "to bottom", the red fades to the blue at the bottom. Red and blue are the colors of the gradient, and you can change them by typing in hex codes of colors, just separate them like this example: linear gradient (to bottom, #000000, #FFFFFF) Click here for a good website for gradients! Click here for the website I use to find hex codes! "Font-family: Times New Roman" Font family is basically the font your text is in, for example this guide's font is Rubik (which is one of my favorite fonts). There are many code-friendly fonts, but here's a short list of some good fonts! * Times New Roman * Georgia * Papyrus * Garamond * Rubik * Courier * Courier New * Arial * Helvetica * Bookman To change the font of a page, you can simply type ' '''for example. Another thing to remember about fonts: Not all fonts are supported by all computers, and if your computer doesn't work with the font you have chosen, it will show up as Arial. '"Border: 5px solid #FFF"' Border is basically what is the "outer line" of the background, and gives "shape" to the background. The pixel size can vary, but usually, 5px is the go-to border size, but 2px works well as well. Solid means the border type, and basically forms a solid border around the background. #FFF is the color of the border, and in this case, it's the shortened hex code for white. However, do ''not ''shorten hex codes of other colors (beside black, which you can shorten to #000) to three characters only, as that will not work. Some border types include: * Solid * Double * Dotted * Inset * Outset These are just a few examples, but are the most commonly-used ones! '"Padding: 10px"' Padding is basically what "backs" the page in code, like how much space your words is located on. This is a little hard to explain, but basically, 10px padding is the standard! '"Color: #FFF"' Self-explanatory, right? This is the color of the text. Welp, you've just learnt all the basics! That's great! Now, we're going onto ''harder ''stuff, but not too hard, not yet. Things are going to be harder to explain for me, and harder to understand in the next section. 'Coding a Page: The Not-so Basics' We'll be learning about '''Collapsibles', Display Titles, Quote Boxes, Custom Infoboxes and Text Alignment in this section! Get ready for tons of unofficial terms and probably extremely confusing stuff! Collapsibles Collapsibles is a code element that I learnt only very recently. It's that thing I always put on the pages - click on the image for the rest of the page to appear! 'A Section by Qibli on Random Details of Coding' (Moon said I could help with the guide) 'Random Code Trivia' *Linear gradients can go in diagonal directions (bottom right, top left, etc.) *Instead of writing #fff or #000, you can write white, black, etc. You can do that with any color. For example: ** gives you this. **Red, orange, yellow, green, blue, purple, pink, and many other colors are available, though I don't know exactly how many. 'Basic Code Stuff That Everyone Should Know (But Just In Case You Don't)' 'One Really, Really Basic Thing' Always, always, ALWAYS code in source mode!!!! There are two ways to get to source mode. #Go into visual editor. Then click the triple bar with the dropdown next to it (left of the save page button) and click [ ] Source Editor. This will take you to a box with source mode. #Go into classic editor, then go to the top with the tabs Source and Visual. Click Source. Sometimes if there is a lot of complicated coding on that page already it will default you to source mode. 'Easy Code Things that you can Learn in a Second if you Haven't Already' *Putting and around text puts a link to that page on this wiki. Example: Sharpfire The Unsinkable gives Sharpfire The Unsinkable. Also, you can make a link look differently than it says. For example, Click here for a Sharpfire shipping page gives Click here for a Sharpfire shipping page. *You can also use and to insert images. To make an image appear you have to write this: which gives You can also put captions on pictures and set the size and align of the picture. For example, gives *Putting [ and ] around text puts a link to an external webpage (not on this wiki). **''Extra note:'' You don't actually have to put the [ and ] for the link to show up. Just paste the link. Then you will see text. If you put the [ and ] all that will show up is a number in brackets. Example: https://www.sharpfireisthebest.com/ gives https://www.sharpfireisthebest.com/ while https://www.sharpfireisthebest.com gives https://www.sharpfireisthebest.com (Don't try either of those links—sadly sharpfireisthebest.com does not exist.) *Putting around text makes a template of that name appear. Example: gives *Putting '' and '' (that's two apostrophes, not a quote) around text makes it italic. Example: Sharpfire is awesome! gives Sharpfire is awesome! *Putting ' and ' (that's three apostrophes) around text makes it bold. Example: Sharpfire is everyone's OTP gives Sharpfire is everyone's OTP *Putting '' and '' (that's five apostrophes) around text makes it bold and italic. (Makes sense right? Three plus two is five...?) Example: Sharptalon x Phoenixfire gives Sharptalon x Phoenixfire *Putting and around text underlines it. Example: Sharptalon and Phoenixfire are FeatherClan cats. gives Sharptalon and Phoenixfire are FeatherClan cats. *Putting and around text makes it the stalker strikethrough text. You can see an example of that right there. The code for that is stalker 'Tags' Here I'll put a list of various tags you can use to do things. Tags should always go inside < and >. * centers the text. **Technically the "proper" way to do this is . is faster, but there's a chance that if your browser ever randomly stops recognizing these tags then your coding will break. * makes coding not work. So if you're explaining coding to someone you are probably going to use that a lot. Also if you need to write apostrophes or sharp brackets without accidentally making it coding, helps a lot. * makes text appear in a sort of box. You saw it above when I was telling you about basic coding stuff. * and make the text smaller and bigger. (Wow, how surprising.) **Again, the "proper" way to do this is Except replace "something" with a number. I FINALLY FOUND THE FORMULA YAY GRAPHING CALCULATORS ***y = 5''x'' + 13⅓ ***''x'' is the number of tags, and y'' is the font size using **HERE'S THE FORMULA USING TAGS: ***''y = -5''x'' + 13⅓ ***''x'' is the number of tags, and y'' is the font size **These formulas may not be exact but they're as close as I could get. If you want to use them instead of using one-third and two-thirds use .3 and .7, as they are more likely to be recognized by HTML code. * and make text superscript and subscript. 'Gradients' (Moon already talked about linear gradients above, so I don't see any need to tell you about them again, but I will be going into detail about other types of gradients.) 'Radial Gradients' These are gradients that go around in a circle. You use them the same way as radial gradients, just you don't have to put a direction. One thing to remember about radial gradients: THE FIRST COLOR YOU PUT IS GOING TO BE IN THE MIDDLE. For example: text gives: text 'Gradients On Text' This is something I learned pretty recently, from Dew (you can see how she does it on Brookwish). An example of the code is text which gives text Pretty cool, huh? You can do it with a paragraph too: Lorem ipsum dolor sit amet, eu accusata delicata mei, sea ei modo mucius imperdiet. Quando vivendo molestiae nec et, ad sea veri expetendis. Te delectus persequeris disputationi cum. Vidit movet vis ea, sint detraxit accusamus ne vel, veritus lucilius in sea. And you can also do it with radial gradients (though it doesn't really look like a circle): Lorem ipsum dolor sit amet, eu accusata delicata mei, sea ei modo mucius imperdiet. Quando vivendo molestiae nec et, ad sea veri expetendis. Te delectus persequeris disputationi cum. Vidit movet vis ea, sint detraxit accusamus ne vel, veritus lucilius in sea. You can also gradient display titles!! If Moon ever tells you what they are, that is. Jk. I'll just tell you. Pretty simple stuff, it's just making the title of a page different from what the link is. Code: So to make that gradient, do this. 'Tilts' Example: Tilting text There is one problem with tilts: if you tilt too much, the text will literally move from where you put it. See what I mean? So that's why I've only ever seen tilted text used in forums, not on pages, though you could do it if you wanted. Anyway, the code: text Except if you leave it at 0deg it won't rotate at all, so it's pretty pointless to put it there. The font size can be changed to whatever, but the size that regular text is is 25px. 'Changing Link Color' You know when you code your page and whatever the link color is right now either clashes horribly with the background, is completely invisible, or looks exactly the same as regular text? Well, that's why you can change link color! It's pretty simple, and rather similar to making a link's text different. All you have to do is this: Sharpfire The Unsinkable which gives Sharpfire the Unsinkable. Of course, replace the color with whatever you want. (And you can add a font while you're at it. Check out Moon's section above for how to do that.) Find an example of this on a page here. (Scroll down to Relationships.) 'Text Shadow' I learned this from watching stalking Pokeball. This is how you get a shadow around text. You can either use: Sharpfire is amazing. or Sharpfire is amazing. which both give Sharpfire is amazing. To get that kind of text shadow, use the numbers 0 0 and then a number, example 10, with "px" after it. If you don't already know, "px" stands for "pixels." Look above for an example. To get a shadow that is below and to the right of the text, for example Sharpfire is amazing use the same number (other than 0) every time. '''Example:' Sharpfire is amazing To get basically a shadow version of the text below the text, do 0, then a high number, then a low number. For example Sharpfire is amazing which is made by using Sharpfire is amazing To get a shadow that is directly below the text, for example Sharpfire is amazing use Sharpfire is amazing Also, sometimes it helps to make the pixel number, ex. 10px, the same number as the text size when using bolded text. For example, you would use 0 0 30px if you're using 30 pixel bolded text . ONE THING TO REMEMBER ABOUT TEXT SHADOWS: Always put "px" after a number, unless that number is 0. Then it doesn't matter. To see an example of text shadow on a page, see my OC Lightshadow. 'Tabbers and Tabviews' I think most people already know about tabbers and tabviews, but just in case you don't. 'Tabbers' Tabbers are when you build tabs into a page. This is a way to make the page shorter so that the scrollbar isn't ridiculously tiny. They are often used on fanfictions. It looks like this: Tab 1= This is tab 1. |-|Tab 2= This is tab 2. |-|Tab 3= This is tab 3. The code for that is: Tab 1= This is tab 1. |-|Tab 2= This is tab 2. |-|Tab 3= This is tab 3. You must always remember to put the equals signs after the name of each tab and |-| before the name of each tab (EXCEPT the first one.) 'Tabviews' Tabviews are when you build other pages into one page. Each tab is a different page, and you have to make at least 3 pages to do a tabview (the main page, then tab 1, then tab 2). It would be hard for me to show an example here, but you can see how it's done on Sharptalon's Vengeance. Each chapter is a separate page titled "Sharptalon's Vengeance/Whatever the Name of This Page Is". For example, Sharptalon's Vengeance/Allegiances. Code: Name of First Page Name of Second Page If you're editing in visual mode after the tabview is added in, you may have to reload the page for the tabs to show up. 'Coding the Comments Section' Maybe some of you have seen that on many of my pages, the comments section seems to be part of the coded page, instead of the code cutting off before the comments. If you want to see an example, check out my OC Sky's Crescent, because I'm not explaining it very well. Anyway. To do that. Usually when you code a page you have a tag at the end of everything, right? Well, this is one case where you don't. If you want this to work, delete that tag completely. Then, add the code below to the VERY END of the page. After EVERYTHING. EVERY. SINGLE. LETTER. Category:Guides Category:Miscellaneous Category:Content (Mooneffects) Category:Work In Progress Category:Public Category:Help Category:Content (Qibli77) Category:Collaborations Category:Content (Pokeballmachine)